<template>
  <div class="demo-inner-divider">常规表格 table-normal</div>
  <div class="mg-l-40">
    <e-table :columns="columns" :data="data"></e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">小表格 table-small</div>
  <div class="mg-l-40">
    <e-table :columns="columns" :data="data" size="small"></e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">斑马纹表格 table-stripe</div>
  <div class="mg-l-40">
    <e-table stripe :columns="columns" :data="data"></e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">排序表格 table-sort</div>
  <div class="mg-l-40">
    <e-table :columns="columns12" :data="data12"></e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">无数据表格 table-no-data</div>
  <div class="mg-l-40">
    <e-table :columns="columns" :data="[]">
      <template v-slot:empty>
        <div>不好意思，请求内容为空</div>
      </template>
    </e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">多选带插槽 table-select-with-slot</div>
  <div class="mg-l-40">
    <e-table :columns="columns1" :data="data1" @onSelect="handleSelectionAct" @onSelectionChange="handleSelectionChange">
      <template #motion="{ row }">
        <span>
          <e-tag :status="eTagStatusTrans(row.motionStatus)">{{ statusContentTrans(row.motionStatus) }}</e-tag>
        </span>
      </template>
      <template #action="{ index }">
        <e-button type="primary" size="small" style="margin-right: 5px" @click="update(index)">修改</e-button>
        <e-button size="small" @click="remove(index)">删除</e-button>
      </template>
    </e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">固定滚动列表 table-scroller</div>
  <div class="mg-l-40">
    <e-table :columns="columns2" :data="data2" width="550">
      <template #motion="{ row }">
        <span>
          <e-tag :status="eTagStatusTrans(row.motionStatus)">{{ statusContentTrans(row.motionStatus) }}</e-tag>
        </span>
      </template>
      <template #action="{ index }">
        <e-button type="primary" size="small" style="margin-right: 5px" @click="update(index)">修改</e-button>
        <e-button size="small" @click="remove(index)">删除</e-button>
      </template>
    </e-table>
  </div>

  <div class="demo-inner-divider mg-t-20">嵌入式表格 table-inner</div>
  <div style="font-size: 14px; font-weight: bold;">允许使用render函数或者expandSlot插槽实现</div>
  <div class="mg-l-40">
    <div class="description-content" style="margin: 10px 0;">在列表中，显示某条列表项的详情信息，保持上下文不中断</div>
    <e-table :columns="columns11" :data="data11">
      <template #expandSlot="{ row }">
        <div>{{ row.content }}</div>
      </template>
    </e-table>
  </div>
  <!--  <div class="mg-l-40">-->
  <!--    <div class="description-content" style="margin: 10px 0;">子级表格</div>-->
  <!--  </div>-->
  <div class="mg-l-40">
    <div class="description-content" style="margin: 10px 0;">无拓展详情，且详情字段在6个以内</div>
    <e-table :columns="columnsChildren" :data="dataChildren">
      <template #expandSlot="{ row }">
        <div style="display: flex; flex-wrap: wrap; width: 480px;">
          <div class="info-item" v-for="(item, index) in row.childrenData" :key="index">
            <span class="gray-label">{{ item.key }}</span>
            <span class="gray-value">{{ item.value }}</span>
          </div>
        </div>
      </template>
    </e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">多选+展开 table-selection-with-expand </div>
  <div class="mg-l-40">
    <e-table row-key="name" :columns="columns13" :data="data13" @onSelectionChange="handleSelectionChange">
      <template v-slot:action>
        <e-button type="primary" size="small" style="margin-right: 5px">修改</e-button>
        <e-button size="small">删除</e-button>
      </template>
    </e-table>
  </div>
  <!-- API说明 -->
  <table-md class="markdown-body mg-t-20"></table-md>
</template>
<script>
import TableMd from '../../docs/table.md'

export default {
  components: { TableMd },
  data () {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name',
          resizable: true
        },
        {
          title: '年龄',
          key: 'age',
          resizable: true
        },
        {
          title: '工作部门',
          key: 'occupation',
          resizable: true
        }
      ],
      data: [
        {
          name: 'alfred',
          age: 26,
          occupation: 'IaaS',
        },
        {
          name: 'tom',
          age: 27,
          occupation: 'PaaS'
        },
        {
          name: 'jerry',
          age: 28,
          occupation: 'SaaS'
        }
      ],
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '时间段',
          key: 'duration'
        },
        {
          title: '情绪',
          slot: 'motion'
        },
        {
          title: '工作内容',
          key: 'job'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      data1: [
        {
          duration: '上午',
          motionStatus: 'happy',
          job: '摸鱼',
          possibility: '简单'
        },
        {
          duration: '下午',
          motionStatus: 'sad',
          possibility: '复杂',
          job: '调bug'
        },
        {
          duration: '晚上',
          motionStatus: 'happy',
          possibility: '容易',
          job: '写需求'
        }
      ],
      columns2: [
        {
          title: '时间段',
          key: 'duration',
          width: 100,
          fixed: 'left'
        },
        {
          title: '情绪',
          width: 100,
          slot: 'motion'
        },
        {
          title: '天气',
          width: 100,
          key: 'weather'
        },
        {
          title: '工作内容',
          width: 100,
          key: 'job'
        },
        {
          title: '工作复杂度',
          key: 'possibility',
          width: 100,
        },
        {
          title: '操作',
          width: 140,
          slot: 'action',
          fixed: 'right'
        }
      ],
      data2: [
        {
          duration: '上午',
          motionStatus: 'happy',
          job: '摸鱼',
          weather: '晴',
          possibility: '简单'
        },
        {
          duration: '下午',
          motionStatus: 'sad',
          job: '调bug',
          weather: '晴',
          possibility: '复杂'
        },
        {
          duration: '晚上',
          motionStatus: 'happy',
          job: '写需求',
          weather: '雨',
          possibility: '一般'
        }
      ],
      columns12: [
        {
          title: '姓名',
          key: 'name',
          sortable: true
        },
        {
          title: '年龄',
          key: 'age',
          filters: [
            { label: '大于等于26', value: 1 },
            { label: '小于26', value: 2 }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 1) {
              return row.age >= 26;
            } else if (value === 2) {
              return row.age < 26;
            }
          }
        },
        {
          title: '工作部门',
          key: 'occupation'
        }
      ],
      data12: [
        {
          name: 'alfred',
          age: 26,
          occupation: 'IaaS',
        },
        {
          name: 'tom',
          age: 27,
          occupation: 'PaaS'
        },
        {
          name: 'jerry',
          age: 28,
          occupation: 'SaaS'
        }
      ],
      // 嵌入式表格
      columns11: [
        {
          type: 'expand',
          width: 50,
          render: (h, { row: { name, age, content } }) => {
            return h('div', content)
          }
        },
        {
          title: '姓名',
          key: 'name',
          resizable: true,
          // renderHeader可自定义当前列表头
          renderHeader: (h, { column: { key, title }, index }) => {
            return h(this.$eInput, {
              modelValue:  title,
              disabled: true
            })
          }
        },
        {
          title: '年龄',
          key: 'age',
          resizable: true
        },
        {
          title: '工作单位',
          key: 'occupation',
          resizable: true
        }
      ],
      data11: [
        {
          name: 'alfred',
          age: 26,
          occupation: '移动云',
          content: '移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 ^-^。移动云产品边缘小站EIS公测进行中，欢迎大家试用 ^-^',
          _expanded: true
        },
        {
          name: 'tom',
          age: 27,
          occupation: '阿里云',
          content: '移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 -_-'
        },
        {
          name: 'jerry',
          age: 28,
          occupation: '华为云',
          content: '移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 ^-^'
        }
      ],
      // 子级表格
      columnsChildren: [
        {
          type: 'expand',
          width: 50
        },
        {
          title: '姓名',
          key: 'name',
          resizable: true
        },
        {
          title: '年龄',
          key: 'age',
          resizable: true
        },
        {
          title: '工作单位',
          key: 'occupation',
          resizable: true
        }
      ],
      dataChildren: [
        {
          name: 'Alfred',
          age: 26,
          occupation: '移动云',
          _expanded: true,
          childrenData: [
            { key: '工号：', value: 'E001' },
            { key: '工位：', value: 'C101' },
            { key: '任务：', value: '边缘智能云EIC' },
            { key: '爱好：', value: '读书' },
            { key: '薪资（月薪）：', value: '1w' },
            { key: '身高（cm）：', value: '170' }
          ]
        },
        {
          name: 'Rick and Morty',
          age: 27,
          occupation: '移动云',
          childrenData: [
            { key: '工号：', value: 'E002' },
            { key: '工位：', value: 'C102' },
            { key: '任务：', value: '边缘智能小站EIS' },
            { key: '爱好：', value: '码代码' },
            { key: '薪资（月薪）：', value: '1w' },
            { key: '身高（cm）：', value: '175' }
          ]
        },
        {
          name: '11xiaoxian',
          age: 28,
          occupation: '移动云',
          childrenData: [
            { key: '工号：', value: 'E003' },
            { key: '工位：', value: 'C103' },
            { key: '任务：', value: '边缘智能服务平台EISP' },
            { key: '爱好：', value: '游泳' },
            { key: '薪资（月薪）：', value: '1w' },
            { key: '身高（cm）：', value: '180' }
          ]
        }
      ],
      columns13: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '团建类别',
          key: 'name',
          tree: true
        },
        {
          title: '经费（元）',
          key: 'age'
        },
        {
          title: '可开票',
          key: 'occupation'
        },
        {
          title: '操作',
          width: 140,
          slot: 'action'
        }
      ],
      data13: [
        {
          name: '烧烤',
          age: 2000,
          occupation: '是',
          children: [
            {
              name: '肉类',
              age: 500,
              occupation: '是'
            },
            {
              name: '蔬菜类',
              age: 500,
              occupation: '是'
            }
          ]
        },
        {
          name: '游乐园',
          age: 3000,
          occupation: '是',
          _showChildren: true,
          children: [
            {
              name: '跳楼机',
              age: 400,
              occupation: '是'
            },
            {
              name: '过山车',
              age: 200,
              occupation: '是'
            },
            {
              name: '鬼屋',
              age: 400,
              occupation: '否'
            }
          ]
        },
        {
          name: '野炊',
          age: 3500,
          occupation: '是',
          children: [
            {
              name: '钓鱼',
              age: 1000,
              occupation: '否'
            },
            {
              name: '果蔬',
              age: 500,
              occupation: '是'
            },
            {
              name: '熟食',
              age: 600,
              occupation: '是'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleSpan ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        return [1, 2];
      } else if (rowIndex === 0 && columnIndex === 1) {
        return  [0, 0];
      }
      if (rowIndex === 1 && columnIndex === 0) {
        return {
          rowspan: 2,
          colspan: 1
        };
      } else if (rowIndex === 2 && columnIndex === 0) {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    },
    update (index) {
      // 一些逻辑操作逻辑
    },
    remove (index) {
      // 一些逻辑操作逻辑
    },
    eTagStatusTrans(status) {
      return {
        'happy': 'success',
        'sad': 'error'
      }[status]
    },
    statusContentTrans(status) {
      return {
        'happy': '开心',
        'sad': '沮丧'
      }[status]
    },
    handleSelectionAct (selection, selectionData) {
      // 一些逻辑操作逻辑
    },
    handleSelectionChange (selection) {
      // 一些逻辑操作逻辑
    }
  }
}
</script>

<style scoped>
.mg-t-20 {
  margin-top: 20px;
}
.mg-l-40 {
  margin-left: 40px;
}
.description-content {
  color: #6236FF;
}
.info-item {
  display: flex;
}
.gray-label {
  display: inline-block;
  width: 120px;
  height: 32px;
  text-align: left;
  color: #999;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
}
.gray-value {
  display: inline-block;
  color: #333;
  height: 32px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px 6px 0;
  max-width: calc(100% - 150px);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 120px;
}
</style>
